<template>
    <el-card shadow="never" class="content-wrap">
        <!-- <Notice></Notice> -->
        <div class="pad20">
            <!-- <Notice></Notice> -->
            <Header></Header>
        </div>
        <!-- <div class="chat-wrap">
            <div class="quesListBox">
                <div v-for="item in quesListA" :class="['chat-item',{'tip-item':item.que == ''}]" @click="goChat(item.que)">{{ item.name }}</div>
            </div>
            <div class="quesListBox">
                <div v-for="item in quesListB" :class="['chat-item',{'tip-item':item.que == ''}]" @click="goChat(item.que)">{{ item.name }}</div>
            </div>
            <div class="quesListBox">
                <div v-for="item in quesListC" :class="['chat-item',{'tip-item':item.que == ''}]" @click="goChat(item.que)">{{ item.name }}</div>
            </div>
        </div>
        <div class="pad20">
            <div class="send-box">
            <el-input placeholder="发送消息"></el-input><el-button>开始聊天</el-button>
            </div>
            <div class="tip">本站点基于外部API二次开发，仅供学习 AI 使用，使用前请知晓 免责申明</div>
        </div> -->
    </el-card>
</template>

<script  setup lang="ts">
const Router = useRouter()
const quesListA = ref([
    {
        name: 'AI文章创作',
        que: ''
    },
    {
        name: '写新闻',
        que: '帮我写一篇新闻'
    },
    {
        name: '写博客',
        que: '帮我写一篇博客'
    },
    {
        name: '写诗歌',
        que: '帮我写一篇诗歌'
    },
    {
        name: '写小说',
        que: '帮我写一篇小说'
    },
])
const quesListB = ref([
    {
        name: 'AI写程序',
        que: ''
    },
    {
        name: '编写程序代码',
        que: '帮我写一段程序代码'
    },
    {
        name: '程序语言转换',
        que: '帮我转换一下程序语言'
    },
    {
        name: '修复代码BUG',
        que: '帮我找出这段程序代码的BUG'
    },
    {
        name: '生成程序文档',
        que: '帮我生成这篇程序文档'
    },
])
const quesListC = ref([
    {
        name: '特色服务',
        que: ''
    },
    {
        name: '论文润色',
        que: '论文润色'
    },
    {
        name: '修改简历',
        que: '修改简历'
    },
    {
        name: '起名字',
        que: '起名字'
    },
    {
        name: '算命',
        que: '算命'
    }
])

function goChat(que:string) {
    Router.push({
        name: 'chat',
        query:{ que }
    })
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
    padding: 0px;
}
.pad20 {
    padding: 20px;
}
.quesListBox {
    display: flex;
    flex-direction: column;
    width: 35%;
    div {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        margin: 0.25rem;
        padding: 0.75rem 0.3rem;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 14px;
    }
    .tip-item{
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        background-color: #fff;
        cursor: inherit;
    } 
    
}
.content-wrap{

    .chat-wrap{
        display: flex;
        justify-content: space-between;
        .tip-item{
            font-size: 16px;
            font-weight: 600;
            background-color: #fff;
            cursor: inherit;
        }
    }
    .send-box{
        display: flex;
        .el-button{
            margin-left: 10px;
        }
    }
    .tip{
        margin-top: 12px;
        text-align: center;
        color: rgba(0,0,0,.5);
        font-size: .75rem!important;
    }
}
@media screen and (min-width: 600px) {
.content-wrap{
    padding: 20px 50px;
    .chat-wrap{
        .tip-item{
            font-size: 16px;
            font-weight: 600;
            background-color: #fff;
            cursor: inherit;
        }
    }
    .send-box{
        display: flex;
        .el-button{
            margin-left: 10px;
        }
    }
    .tip{
        margin-top: 12px;
        text-align: center;
        color: rgba(0,0,0,.5);
        font-size: .75rem!important;
    }
}
}

</style>